<template>
  <div class="app-container-flex">
    <NewFullScreen v-model="showDialog" :title="title">
      <print
        :temp-value="value"
        v-model:widget-options="widgets"
        @save="handleSave"
      />
    </NewFullScreen>
  </div>
</template>
<script setup name="printConfigDesigener">
import print from '@/components/Print/index'
import commonComponents from './option'
import { getInitPrintDetail } from '@/api/base'

const emit = defineEmits()
const { proxy } = getCurrentInstance()
const props = defineProps({
  visible: {
    type: Boolean,
    defaule: false,
  },
  title: {
    type: String,
    defaule: '',
  },
  formData: {
    type: Object,
    defaule: {},
  },
  desigenerType: {
    type: String,
    defaule: '',
  },
})

let value = reactive({
  title: '模板',
  width: 750,
  height: 500,
  pageWidth: 750,
  pageHeight: 500,
  horizontally: 1,
  tempItems: [], //已选的组件
})
const widgets = ref([]) //组件

let showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})

let _formData = props.formData
if (_formData && _formData.id) {
  value = {
    title: _formData.name,
    width: _formData.width,
    height: _formData.height,
    pageWidth: _formData.pageWidth,
    pageHeight: _formData.pageHeight,
    horizontally: _formData.horizontally,
    tempItems: JSON.parse(_formData.templateContent), //已选的组件
  }
  widgets.value = JSON.parse(_formData.templateColumnContent)
} else {
  if (_formData.customizeTableSettingId) {
    getInitPrintDetailList()
  } else {
    value = {
      title: _formData.name,
      width: _formData.width,
      height: _formData.height,
      pageWidth: _formData.pageWidth,
      pageHeight: _formData.pageHeight,
      horizontally: _formData.horizontally || 1,
      tempItems:
        props.desigenerType === 'copy'
          ? JSON.parse(_formData.templateContent)
          : [], //已选的组件
    }
    if (props.desigenerType === 'copy') {
      widgets.value = JSON.parse(_formData.templateColumnContent)
    } else {
      widgets.value = proxy.$fn.deepClone(commonComponents.commonComponents)
    }
  }
}

function handleSave(data) {
  let option = proxy.$store.state.print.options
  let _formData = props.formData
  _formData.width = data.width
  _formData.height = data.height
  _formData.pageWidth = data.pageWidth
  _formData.pageHeight = data.pageHeight
  _formData.horizontally = data.horizontally
  _formData.name = data.title
  _formData.templateColumnContent = JSON.stringify(option)
  _formData.templateContent = JSON.stringify(data.tempItems)
  emit('callback', _formData, () => {
    showDialog.value = false
  })
}
function getInitPrintDetailList() {
  let _formData = props.formData
  let templateContent = []
  let params = {
    id: _formData.customizeTableSettingId,
  }
  if (props.desigenerType === 'copy') {
    templateContent = _formData.templateContent
      ? JSON.parse(_formData.templateContent)
      : [] //已选的组件
  }
  getInitPrintDetail(params).then((res) => {
    if (res && res.success) {
      if(res.data.columnsAttr && res.data.columnsAttr.length){
        res.data.columnsAttr.forEach(item => {
          item.width = item.printWidth || undefined
        });
      }
      let data = [res.data]
      let option = []
      if (props.desigenerType === 'copy') {
        let arr = JSON.parse(_formData.templateColumnContent)
        if (arr.length) {
          let index = arr.findIndex(
            (item) => item.type === 'braid-table' && item.name === 'details'
          )
          if (index > -1) {
            if (
              _formData.defaultCustomizeTableSettingId !==
              _formData.customizeTableSettingId
            ) {
              arr[index] = data[0]
            }
          } else {
            arr = arr.concat(data)
          }
          option = arr
        } else {
          option = proxy.$fn.deepClone(commonComponents.commonComponents)
          option = option.concat(data)
        }
        console.log()
      } else {
        option = proxy.$fn.deepClone(commonComponents.commonComponents)
        option = option.concat(data)
      }
      value = {
        title: _formData.name,
        width: _formData.width,
        height: _formData.height,
        pageWidth: _formData.pageWidth,
        pageHeight: _formData.pageHeight,
        horizontally: _formData.horizontally || 1,
        tempItems: templateContent,
      }
      widgets.value = option
      console.log('widgets', widgets.value)
      console.log('option', option)
    }
  })
}
</script>
